<template>
  <VolHeader
    class="el-icon-s-grid"
    text="已办流程"
    style="padding-left: 10px; margin-bottom: 26px"
  >
  </VolHeader>
<VolForm
      ref="tj_myform"
      :loadKey="tj_loadKey"
      :formFields="tj_formFields"
      :formRules="tj_formRules"
    >
    </VolForm>
  <el-row>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"
      ><div class="grid-content bg-purple-light">
        <el-button type="primary" @click="tj_search">查询</el-button>
        <el-divider direction="vertical" border-style="dashed" />
        <el-dropdown split-button type="primary" @click="tt">
          详细表单
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="f_print('hktzs')"
                >汇款通知书</el-dropdown-item
              >
              <el-dropdown-item @click="f_print('cnbxd')"
                >差旅费报销单</el-dropdown-item
              >
              <el-dropdown-item @click="f_print('fybxd')"
                >费用报销单</el-dropdown-item
              >
              <!-- <el-dropdown-item>审批流程</el-dropdown-item> -->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>

  <el-table
    :data="tabledata"
    height="380"
    border
    style="width: 100%"
    highlight-current-row
    @sort-change="sortChange"
    @current-change="on_click_handleCurrentChange"
    :cell-style="cellstyle"
    ref="multitable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column label="查看" width="120">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          @click="look_reimitem(scope.$index, scope.row)"
          >详细</el-button
        >
        <el-button
          v-show="scope.row.fujian != null"
          type="text"
          @click="downfile(scope.row.fujian)"
          size="small"
          >附件</el-button
        >
        <el-button
          v-show="is_shen(scope.row.reim_id)"
          type="text"
          @click="shenh(scope.row.reim_id)"
          size="small"
          >解除可用额度限制</el-button
        >
      </template>
    </el-table-column>
    <el-table-column type="selection" width="55" />
    <el-table-column prop="reim_id" label="编号" width="100" sortable />
    <el-table-column prop="typename" label="类别" width="180" sortable />
    <el-table-column prop="depname_oa" label="提报部门" width="180" sortable />
    <el-table-column prop="username" label="提报人" width="180" sortable />
    <el-table-column prop="stepname" label="当前步骤" width="180" sortable />
    <el-table-column
      prop="step_username"
      label="当前待处理人"
      width="180"
      sortable
    />
    <el-table-column
      prop="hq_username"
      label="当前汇签处理人"
      width="180"
      sortable
    />
    <el-table-column prop="total_j" label="总金额" width="100" sortable />
    <el-table-column prop="CreateDate" label="创建时间" width="180" sortable />
  </el-table>
  <div style="text-align: center; margin-top: 30px">
    <el-pagination
      background
      layout="total,sizes,prev, pager, next"
      :total="rows"
      :page-sizes="[10, 60, 100, 120, 200]"
      :page-size="tj_options.pagesize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>

  <el-tabs
    type="border-card"
    v-model="_tabName"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="流程明细" name="first">
      <el-table :data="mxdata" style="width: 100%">
        <el-table-column prop="fk_reimfloat_id" label="序号" width="110" />
        <el-table-column prop="bdatetime" label="处理时间" width="180" />
        <el-table-column prop="UserTrueName" label="处理人" width="180" />
        <el-table-column prop="reyijian" label="提交意见" width="180" />
        <el-table-column prop="ok_remark" label="意见详情" width="180" />
        <el-table-column prop="stepname" label="步骤" width="180" />
        <el-table-column prop="node_type" label="类型" width="180" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="流程图" name="second">
      <el-steps :space="200" :active="_active" finish-status="success">
        <el-step
          :title="item.stepname"
          :description="item.description"
          v-for="item in step_items" 
        >
          <template #description="scope">
            {{ item.UserTrueName }}<br />{{ item.bdatetime }}
          </template>
        </el-step>
      </el-steps>
    </el-tab-pane>
  </el-tabs>

  <el-dialog v-model="_dialogV" title="费用明细" width="88%" draggable>
    <div v-show="feiy">
      <view_reim_form ref="view_reim_form"></view_reim_form>
    </div>
    <div v-show="cnf">
      <view_reim_form_cc ref="view_reim_form_cc"></view_reim_form_cc>
    </div>
    <span>
      <el-table :data="reimlist" @row-click="rowclick">
        <el-table-column
          property="fei_typename"
          label="科目"
          width="200"
        ></el-table-column>
        <el-table-column
          property="fei_type"
          label="科目编码"
          width="200"
        ></el-table-column>
        <el-table-column
          property="rcntr_no"
          label="成本中心"
          width="200"
        ></el-table-column>
        <el-table-column
          property="rcntr"
          label="成本中心编码"
          width="200"
        ></el-table-column>
        <el-table-column property="je" label="金额"></el-table-column>
        <el-table-column property="tax" label="税额"></el-table-column>
        <el-table-column property="tickno" label="票号"></el-table-column>
        <el-table-column property="fzdate" label="时间"></el-table-column>
        <el-table-column property="remark" label="备注"></el-table-column>
      </el-table>
      <ys_analyse_detail ref="ys_analyse_detail"></ys_analyse_detail>
    </span>
    <template #footer>
      <span>
        <el-button type="primary" @click="_dialogV = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="_vshen" title="填写解除意见" width="80%" center>
    <reimfloat_form ref="reimfloat_form1"></reimfloat_form>
    <!-- <span>确定审核通过吗？</span> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="_vshen = false">取消</el-button>
        <el-button type="primary" @click="s_shen_sever">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="_v_print" title="">
    <div style="">
      <pre_print ref="pre_print1"></pre_print>
      <!-- 窗体 -->
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="_v_print = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from '@/components/basic/VolForm.vue';
import http from "@/api/http.js";
import { ArrowDown } from "@element-plus/icons"; //注意引入包，后需要在components中export
import pre_print from "@/extension/mytable/mytable/other/pre_print.vue";
import ys_analyse_detail from "@/views/mytable/mytable/ys_analyse_detail.vue";
import reimfloat_form from "@/extension/mytable/mytable/other/reimfloat_form.vue";
import view_reim_form from "@/extension/mytable/mytable/other/view_reim_form.vue";
import view_reim_form_cc from "@/extension/mytable/mytable/other/view_reim_form_cc.vue";
export default {
  components: {
    ys_analyse_detail,
    reimfloat_form,
    VolHeader,
    pre_print,
    ArrowDown, //注意引入包，后需要在components中export
    view_reim_form,
    view_reim_form_cc,
    VolForm
  },
  data() {
    return {
      tj_formFields:{"reim_id":"","typeid":"","bdatetime":"","depid_oa":"","username":""},
      tj_formRules:[[{"title":"编号","field":"reim_id","type":"input"},
      {"dataKey":"tree_department","data":[],"title":"部门名称","field":"depid_oa","type":"cascader"},
      {"dataKey":"typelist","data":[],"title":"业务类型","field":"typeid","type":"select"},],
      [{"title":"填报时间","field":"bdatetime","type":"date","range": true,onChange: (val) => {
              console.log('日期:' + val);
            }},
            {"dataKey":"uerlist","data":[],"title":"姓名","field":"username","type":"selectList"},]],
      tj_loadKey:true,
      feiy: false,
      cnf: false,
      tabledata: [], //｛通用｝
      rows: 0, //总行数｛通用｝
      tj_options: {
        //提交给后台查询条件｛通用｝
        currentpage: 1, //当前页
        pagesize: 10, //每页大小
        wheres: {
          //用于提交到后端的数据结构，如果没有查询条件就不要定义变量，否则后台会当作查询条件
          year: "",
          month: "",
          racct: "all",
          cntr: "all",
          reim_id: null,
        },
        orderby: {
          ordername: "CreateDate", //table排序字段
          orderfx: "desc", //asc,desc
        },
      },
      mxdata: [], //明细数据用于显示
      _mxdata: [], //用于过程处理
      step_items: [],
      _active: 1,
      _dialogV: false, //
      reimlist: [],
      _reimlist: [],
      _tabName: "first",
      _v_fujian: 0,
      _sqj: [], //待审核reimid[]
      _vshen: false,
      _cur_shen_id: null, //当前审核reim_id
      _curr_muti_select: [], //当前多选的行
      _v_print: false,
    };
  },
  setup() {},
  destroyed() {},
  mounted() {
    this.tj_search();
  },
  methods: {
    rowclick(row, column, event) {
      var ndate = new Date();
      let tijian = {
        racct: row.fei_type,
        rcntr: row.rcntr,
        racct_name: row.fei_typename,
        rcntr_name: row.rcntr_no,
        month: ndate.getMonth(),
        year: ndate.getFullYear(),
      };
      let _tijiao = encodeURIComponent(JSON.stringify(tijian));

      //console.log(row);

      let url = "/api/Fk_yusuan/ys_analyse_detail?options=" + _tijiao;
      http.post(url, {}, true).then((s) => {
        //console.log(s);
        //this.$refs.ys_analyse_detail.ys_data.splice(0,this.$refs.ys_analyse_detail.ys_data.length);
        //this.$refs.ys_analyse_detail.sj_data.splice(0,this.$refs.ys_analyse_detail.sj_data.length)
        s.ys.forEach((x) => {
          x.racct_name = s.racct_name;
          x.rcntr_name = s.rcntr_name;
        }); //把中文名称赋值给ys,相当于给s.ys增加属性
        s.sj.forEach((x) => {
          x.racct_name = s.racct_name;
          x.rcntr_name = s.rcntr_name;
        });
        this.$refs.ys_analyse_detail.ys_data = s.ys;
        this.$refs.ys_analyse_detail.sj_data = s.sj;
        //console.log(this.$refs.ys_analyse_detail.ys_data);
        //return;
        //this.rows = s.rows;
        //this.tabledata.splice(0, this.tabledata.length);
        //this.tabledata.push(...s._query);
      });
    },
    tj_search() {
      //｛通用｝
      //console.log(this.$route.name);
      
      let tj_volform=encodeURIComponent(JSON.stringify(this.tj_formFields))
      let _tjoptions = encodeURIComponent(JSON.stringify(this.tj_options)); //防止中文
      let url =
        "/api/Fk_reimlist/my_reim_list?options=" +
        _tjoptions +
        "&menu=" +
        this.$route.name+
        "&tj_volform="+tj_volform;
      let _s = [];

      http.post(url, {}, true).then((s) => {
        //有访问后台的http时初始化一定要放在http里面
        this._mxdata.splice(0, this._mxdata.length);
        this.mxdata.splice(0, this.mxdata.length); //清空表
        this._reimlist.splice(0, this._reimlist.length);
        this.reimlist.splice(0, this.reimlist.length); //清空表

        s.q_minx.forEach((x) => {
          //流程明细表把服务器端的多个对象合并，方便前端取数
          let _t = {
            //合并新的对象
            ...x.q,
            UserTrueName: x.UserTrueName,
            stepname: x.stepname,
            ok_remark: x.ok_remark,
            description: x.description,
          };
          this._mxdata.push(_t); //流程明细
          //console.log(_t);
        });

        s.all_reimlist.forEach((x) => {
          //报销明细表 服务器端的多个对象合并
          let _t = {
            //合并新的对象
            ...x.q,
            fei_typename: x.fei_typename,
            rcntr_no: x.rcntr,
          };
          this._reimlist.push(_t); //流程明细
        });

        this.rows = s.rows; //总行数
        this.tabledata.splice(0, this.tabledata.length); //清空表
        this.tabledata.push(...s._query);
        //console.log(s._query);
        //this.tabledata.push(...s);
        //console.log(this._mxdata);
        this._sqj = this._mxdata.filter((s) => s.node_type == "sqj"); //申请预算不限制
        // console.log(this._reimlist);
        // console.log(s._all_ys);
      });
    },

    handleCurrentChange(val) {
      //点击下一页,｛通用｝
      this.tj_options.currentpage = val;
      this.tj_search();
    },
    handleSizeChange(val) {
      //改变页面大小｛通用｝
      this.tj_options.pagesize = val;
      this.tj_search();
    },

    sortChange(column, prop, order) {
      //排序｛通用｝
      this.tj_options.orderby.ordername = column.prop;
      let fx = "";
      if (column.order == "descending") {
        //主要与服务器的SQL语句兼容
        fx = "desc";
      } else {
        fx = "asc";
      }
      this.tj_options.orderby.orderfx = fx;
      this.tj_search();
      //console.log(column.prop); //prop标签 => nickname
      //console.log(column.order);//descending降序、ascending升序
    },
    on_click_handleCurrentChange(currentrow, oldrow) {
      this.$refs.multitable.toggleRowSelection(currentrow); //这行加上直接实现勾选
      //单击一行后
      //console.log(currentrow)
      if (currentrow == null) return;
      this.mxdata.splice(0, this.mxdata.length); //清空表
      let _show = this._mxdata.filter(
        (s) => s.reimid == currentrow.reim_id && s.node_type != "key"
      );
      let _noshow = this._mxdata.filter(
        (s) => s.reimid == currentrow.reim_id && s.node_type == "key"
      ); //key为关键步骤，流程初始化生成的
      this.mxdata.push(..._show);
      this.step_items = _noshow;
      this._active = _noshow.findIndex(
        (t) => t.stepname == currentrow.stepname
      ); //返回查询项所在的位置
      //console.log(_noshow)
    },

    look_reimitem(index, row) {
      console.log(row);

      //console.log(this.$refs.ys_analyse_detail.ys_data)
      //this.$refs.ys_analyse_detail.sj_data.splice(0,this.$refs.ys_analyse_detail.sj_data.length);
      this.reimlist.splice(0, this.reimlist.length); //清空表
      this.reimlist = this._reimlist.filter((t) => t.reim_id == row.reim_id);
      this._dialogV = true;
      // /console.log(this.$refs.ys_analyse_detail.ys_data)

      //if (this.$refs.ys_analyse_detail.hasOwnProperty('ys_data')){
      this.$nextTick(() => {
        this.$refs.ys_analyse_detail.ys_data.splice(
          0,
          this.$refs.ys_analyse_detail.ys_data.length
        );
        this.$refs.ys_analyse_detail.sj_data.splice(
          0,
          this.$refs.ys_analyse_detail.sj_data.length
        );

        if (row.typeid == 1) {
          this.feiy = true;
          this.cnf=false;
          let params = {
            page: 1, //分页页数(可不填)
            rows: 30, //分页大小(可不填)
            sort: "排序字段", //可不填
            order: "desc/asc", //可不填
            wheres: [{ name: "reim_id", value: row.reim_id }], // 查询条件(可不填)
          };
          this.$store.getters.data().curr_reimid = row.reim_id;
          this.$refs.view_reim_form.$refs.tableList.load(params, true); //查询审核页的业务数据
          for (var item in this.$refs.view_reim_form.$refs.myform.formFields) {
            this.$refs.view_reim_form.$refs.myform.formFields[item] =
              row[item]; //给界面赋值
            //console.log(item)
          }
        } else {
          this.feiy = false;
          this.cnf = true;
          let params = {
            page: 1, //分页页数(可不填)
            rows: 30, //分页大小(可不填)
            sort: "排序字段", //可不填
            order: "desc/asc", //可不填
            wheres: [{ name: "reim_id", value: row.reim_id }], // 查询条件(可不填)
          };
          this.$store.getters.data().curr_reimid = row.reim_id;
          this.$refs.view_reim_form_cc.$refs.tableList.load(params, true); //查询审核页的业务数据
          for (var item in this.$refs.view_reim_form_cc.$refs.myform
            .formFields) {
            this.$refs.view_reim_form_cc.$refs.myform.formFields[item] =
              row[item]; //给界面赋值
            //console.log(item)
          }
        }
      });
      //}
    },
    downfile(dbfilename) {
      let url = this.http.ipAddress + dbfilename;
      window.open(url);
    },
    cellstyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //待审核
        if (this._sqj.findIndex((s) => s.reimid == row.reim_id) != -1) {
          return "background:orange";
        }
      }

      //console.log(column)
      //
    },
    is_shen(_id) {
      //判断是否显示审核按钮
      return (
        this._sqj.findIndex((s) => s.reimid == _id) != -1 &&
        this.$route.name == "reim_all_lookup"
      );
    },
    shenh(_id) {
      this.$nextTick(() => {
        this._cur_shen_id = _id;

        this.$store.getters.data().curr_yjbm = "同意解除超预算额度提报限制。";
        this._vshen = true;
        //this.$refs.reimfloat_form1.$refs.myform.formFields.reyijian="同意解除超预算额度提报限制。"
        //console.log(this.$refs.reimfloat_form1)
      });
    },
    s_shen_sever() {
      //console.log(this._sqj);

      var postdata = this.$refs.reimfloat_form1.$refs.myform.formFields;
      //console.log(postdata);
      let fk_reimfloat_id = this._sqj.find(
        (s) => s.reimid == this._cur_shen_id
      ).fk_reimfloat_id;
      let url = "/api/Fk_reimlist/shenh?reimfloat_id=" + fk_reimfloat_id;
      http.post(url, postdata, true).then((s) => {
        this._vshen = false;
        this.tj_search();
      });
    },
    f_print(ls_type) {
      if (this._curr_muti_select.length == 0) {
        this.$message.error("需要打印的行请勾选");
        return;
      }
      this.$store.getters.data()._curr_muti_select = {
        muti_select: this._curr_muti_select,
        ls_type: ls_type,
      };
      this._v_print = true;
      this.$nextTick(() => {
        //子组件调用是需要$nextTick
        //console.log()
        this.$refs.pre_print1.tj_search();
      });
      //console.log(this.$refs);
      //console.log(this.$store.getters.data()._curr_muti_select);
    },
    handleSelectionChange(selection) {
      this._curr_muti_select = selection;
      //console.log(selection);
    },
  },
};
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 0px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 0px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
